<template>
  <sweet-button @click="open">Show message</sweet-button>
  <sweet-button @click="openVn">VNode</sweet-button>
  
  <sweet-button @click="open2">success</sweet-button>
  <sweet-button @click="open3">warning</sweet-button>
  <sweet-button @click="open1">message</sweet-button>
  <sweet-button @click="open4">error</sweet-button>
</template>

<script >
import {h, inject} from 'vue';
import { SweetMessage, SweetMessageBox } from '@hw-seq/sweet-ui-base';

export default {
  methods: {
    open() {
      // SweetMessage('this is a message.');
      SweetMessage({message: 'this is a message.', namespace: 'sweet'});
    },
    openVn() {
      SweetMessage({
        message: h('p', null, [h('span', {style: 'color: white'}, 'Message can be '), h('i', {style: 'color: teal'}, 'VNode')]),
        namespace: 'sweet'
      });
    },
    open1() {
      // SweetMessage('this is a message.');
      SweetMessage({message: 'this is a message.', namespace: 'sweet'});
    },
    open2() {
      SweetMessage({
        message: 'Congrats, this is a success message.',
        type: 'success',
        namespace: 'sweet'
      });
    },
    open3() {
      SweetMessage({
        message: 'Warning, this is a warning message.',
        type: 'warning',
        namespace: 'sweet'
      });
    },
    open4() {
      // SweetMessage.error('Oops, this is a error message.');
      SweetMessage.error({message: 'Oops, this is a error message.', namespace: 'sweet'});
    },
  }
};
</script>
